<!doctype html>
<html>

<head>
	<title>登录</title>
</head>

<body>
	<div class="login">
		<!-- 顶部 -->
		<div class="logintop">
			<div class="container flex space-between">
				<div class="top_left">
					<img src="../../images/logo.png" alt="">
					<span class="span1">净水器</span>
					<span class="span2">惠聚优质净水器/直饮水</span>
				</div>
				<div class="top_right flex y-center">
					<img src="../../images/home.png" alt="">
					<span class="span3">
						<a href="./index.html">进入网址首页</a>
					</span>
				</div>
			</div>
		</div>

		<div class="centerbox">
			<div class="container innerbox">
				<div class="loginbox">
					<div class="title">用户登录</div>
					<div class="inputbox">
						<input type="text" placeholder="用户名称/手机号码">
						<img src="../../images/account.png" alt="">
					</div>
					<div class="inputbox">
						<input type="password" placeholder="输入登陆密码">
						<img src="../../images/password.png" alt="">
					</div>
					<button class="but">登陆</button>
					<div class="container flex space-between forgetpass">
						<span>
							<a href="#">忘记密码？</a>
						</span>
						<span>
							<a href="./register.html">新用户注册</a>
						</span>
					</div>
					<div class="container flex space-between y-center otherlogin">
						<div class="line"></div>
						<div class="text">其他方式登录</div>
						<div class="line"></div>
					</div>
					<div class="container flex space-between logintype">
						<div>
							<img class="wechat" src="../../images/wechat.png" alt="">
							<div>微信</div>
						</div>
						<div>
							<img class="weibo" src="../../images/webo.png" alt="">
							<div>微博</div>
						</div>
						<div>
							<img class="qq" src="../../images/qq.png" alt="">
							<div>QQ</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 底部 -->
		<div class="loginfooter">
			<div class="container flex x-center y-center list">
				<div>
					<a href="#">关于我们</a>
				</div>
				<div>
					<a href="#">帮助中心</a>
				</div>
				<div>
					<a href="#">售后服务</a>
				</div>
				<div>
					<a href="#">配送与验收</a>
				</div>
				<div>
					<a href="#">商务合作</a>
				</div>
				<div>
					<a href="#">企业采购</a>
				</div>
				<div>
					<a href="#">开放平台</a>
				</div>
				<div>
					<a href="#">搜索推荐 </a>
				</div>
				<div>
					<a href="#">友情链接</a>
				</div>
			</div>
			<div class="container flex x-center list">CopyRight @ 优品汇 2015 - 2017</div>
		</div>
	</div>
</body>

</html>